<template>
	<view>
		<view class="box-swiper">
			<view class="">
				<u-swiper :list="swipers" keyName="image" showTitle height="200" circular></u-swiper>
			</view>
		</view>
		<view class="box-suggest">
			<view class="header">
				<view class="logo">
					<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="widthFix"></image>
				</view>
				<view class="title">精选栏目</view>
				<view class="sub-title">热点栏目推荐</view>
			</view>
			<view class="body">
				<view class="item" v-for="(item,index) in listMenu" :key="index">
					<view class="icon">
						<image :src="item.image" class="icon-img" mode="aspectFill"></image>
					</view>
					<view class="title">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" :bottombar="false" :down="downOption" :sticky="false"
			@up="upCallback" :up="upOption" @init="mescrollInit">
			<view class="box-view" v-for="(item,index) in list" :key="index">
				<view class="content" @click="handleItemClick(item,index)">
					<view class="title u-line-2">
						<text>{{ item.title }}</text>
					</view>
					<view class="bottom">
						<view class="u-flex">
							<text>{{ item.date }}</text>
						</view>
						<view class="u-flex">
							<u-icon name="chat"></u-icon>
							<text>{{ item.total_comments }}</text>
						</view>
						<view class="u-flex">
							<u-icon name="thumb-up"></u-icon>
							<text>{{ item.like_count }}</text>
						</view>
						<view class="u-flex">
							<u-icon name="eye"></u-icon>
							<text>{{ item.pageviews }}</text>
						</view>
					</view>
				</view>
				<view class="face">
					<image :src="item.image" class="banner" mode="aspectFill"></image>
				</view>
			</view>
		</mescroll-body>
		<!-- #ifdef H5 -->
		<view style="height: 100px;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				swipers: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '圣诞节，一起狂欢！',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '冬季特惠季！'
				}],
				listMenu: [
					{ label: '企业版', image: '/static/icons/minapper.jpg' },
					{ label: '精选分类', image: '/static/icons/blocks-arrows.png' },
					{ label: '绿色版', image: '/static/icons/oval-love.png' },
					{ label: '流水线', image: '/static/icons/process-line.png' },
					{ label: '数据集', image: '/static/icons/quadrangular-pyramid.png' },
					{ label: '编辑器', image: '/static/icons/smart-optimization.png' },
					{ label: '集成库', image: '/static/icons/document-folder.png' },
				],
				mescroll: null,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: null,
						tip: "暂无数据",
						fixed: false,
						top: "560rpx",
					},
					textNoMore: '没有更多数据',
					toTop: {
						warpId: null,
						src: null,
						html: null,
						offset: 1000,
						warpClass: "mescroll-totop",
						showClass: "mescroll-fade-in",
						hideClass: "mescroll-fade-out",
						duration: 300,
						supportTap: false,
						btnClick: null
					}
				},
				listQuery: {
					page: 1,
					pageSize: 20
				},
				list: []
			}
		},
		methods: {
			upCallback(options) {
				this.listQuery.page = options.num
				this.listQuery.pageSize = options.size
				this.fetchData()
			},
			// 下拉刷新的回调 (mixin默认resetUpScroll)
			downCallback() {
				this.listQuery.page = 1
				if (this.mescroll.optUp.use) {
					this.mescroll.resetUpScroll()
				} else {
					setTimeout(() => {
						this.mescroll.endSuccess()
					}, 500)
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			fetchData() {
				// console.log(this.listQuery)
				let list = [
					{ "id": 2778, "date": "2023-09-17", "like_count": "3", "total_comments": 1, "pageviews": 1213, "title": "摘录《决胜:解放战争何以胜利》" },
					{ "id": 2776, "date": "2023-09-16", "like_count": "2", "total_comments": 3, "pageviews": 1927, "title": "中国的人口危机" },
					{ "id": 2742, "date": "2023-08-21", "like_count": "1", "total_comments": 5, "pageviews": 2095, "title": "利用PDF.js在微信小程序里预览PDF文件" },
					{ "id": 2739, "date": "2023-08-19", "like_count": "1", "total_comments": 0, "pageviews": 836, "title": "精彩的芯片世界" },
					{ "id": 2733, "date": "2023-08-13", "like_count": "1", "total_comments": 0, "pageviews": 966, "title": "提高学习力的三个维度" },
					{ "id": 2731, "date": "2023-08-12", "like_count": "1", "total_comments": 0, "pageviews": 652, "title": "美丽的代价" },
					{ "id": 2717, "date": "2023-07-19", "like_count": "2", "total_comments": 4, "pageviews": 2006, "title": "学习是最可能的人生捷径" },
					{ "id": 2709, "date": "2023-07-05", "like_count": "0", "total_comments": 0, "pageviews": 1276, "title": "行动影响大脑" },
					{ "id": 2699, "date": "2023-06-18", "like_count": "2", "total_comments": 0, "pageviews": 1563, "title": "父亲不需要节日(8)" }
				]
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					item.image = 'https://picsum.photos/200/300?t=' + i
					this.list.push(item)
				}
				this.mescroll.endSuccess(this.list.length,this.listQuery.page < 5)
			},
			handleItemClick(obj, index) {
				this.$u.route({
					url: '/pages/detail/detail',
					params: { id: obj.id }
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-swiper {
		background-color: #FFF;
		padding: 0px 5upx;
	}

	.box-suggest {
		border: 1px solid #EEE;
		background-color: #FFF;
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 15upx;
		box-shadow: 5px 5px 3px #EEE;
		min-height: 500upx;

		.header {
			display: flex;
			flex-direction: row;
			width: 100%;
			align-items: center;
			border: 0px solid #FF0000;

			.logo {
				width: 50upx;
				height: 50upx;
				box-sizing: border-box;
				margin: 5px 10upx;
				border: 0px solid #EEE;
				border-radius: 40%;
				overflow: hidden;
			}

			.title {
				font-size: 36upx;
				font-weight: 600;
			}

			.sub-title {
				font-size: 24upx;
				color: #808080;
				padding-left: 15upx;
			}
		}

		.body {
			--n: 5;
			--w: 120upx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			border: 0px solid #096;

			.item {
				min-height: 100upx;
				width: var(--w);
				padding: 0px;
				// margin: 10upx 2px;
				margin: 10upx calc((100% - var(--w) * var(--n) - 10px) / var(--n) / 2);
				border: 0px solid #FF0000;


				.icon {
					height: 100upx;
					width: 100upx;
					text-align: center;
					margin: 10upx auto;
					overflow: hidden;
					border-radius: 50%;

					.icon-img {

						height: 100%;
						width: 100%;
					}
				}

				.title {

					font-size: 24upx;
					color: #808080;
					text-align: center;
				}
			}
		}
	}

	.box-view {
		border: 1px solid #EEE;
		background-color: #FFF;
		margin: 10upx;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 15upx;
		box-shadow: 5px 5px 3px #EEE;
		min-height: 200upx;
		display: flex;

		.content {
			flex: 1;
			height: 200upx;
			border: 0px solid #EEE;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {
				color: #484848;
				font-size: 36upx;
				font-weight: 100;
			}

			.bottom {
				display: flex;
				font-size: 24upx;
				color: #808080;
			}

			.u-flex {
				display: flex;
				justify-content: center;
				padding: 5px 10upx;
			}

		}

		.face {
			width: 300upx;
			height: 200upx;
			padding: 10upx;
			box-sizing: border-box;
			overflow: hidden;
			border: 0px solid #096;

			.banner {
				height: 180upx;
				width: 280upx;
				border: 0px solid #096;
				border-radius: 15upx;
			}
		}
	}
</style>